<template>
	
	<view class="p-top30" :style="{'--color': color}">
		<status-bar title="付款"></status-bar>
		 <view class="viewbox auto bgwhite padding20 bor_radius_10" v-if="pageData">
			<view class="row a-center">
				<image :src="$imgUrls(pageData.logo)" mode="aspectFill" class="imgs"></image>
				<view class="flex-1 m-left20 d-flex f-column">
					<view class="ellipsis_2">
						<view class="classIf">{{pageData.bussName}}</view>
						<text class="black size26 bold m-left10">{{pageData.name}}</text>
					</view>
					<text class="ellipsis_2 color_99 size22 m-top10" v-if="pageData.description2">{{pageData.description2}}</text>
					<text class="ellipsis_2 color_99 size22 m-top10" v-else>{{pageData.address}}</text>
				</view>
			</view>
			
			<view class="row a-center m-top20">
				<image :src="$pop.staticImg('jifen.png')" class="jifenIcon"></image>
				<input type="text" v-model="money" class="Jifen" placeholder="请填写付款的金额" />
			</view>
			<view class="color_66 size26 m-top20">当前账号余额：{{pageData.money}}</view>
			
			
			<view class="palyBtn" :class="{'Active':Flag}" @click="cashStore">支付</view>
		</view>
		
		
		<view class="viewbox auto m-top30">
			 <u-parse :content="content" :domain="imgUrl"></u-parse>
		</view> 
		
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				money:'',
				pageData:'',
				content:'',
				shop_id:'',
			}
		},
		onLoad(opt) {
			if(opt.id) this.shop_id = opt.id;
		},
		onShow() {
			this.storesIndex();
		},
		methods: {
			storesIndex(){
				this.$http.post({
					url:'/singleSaleApi/storesIndex',
					data:{
						shop_id:this.shop_id
					}
				}).then(res=>{
					if(res.code != '100') return this.$Toast(res.msg,2);
					const result = res.data;
					this.pageData = result;
					if(result.desc){
						this.listId = result.desc;
						this.listInfo();
					} 
					
				})
			},
			listInfo(){
				this.$http.post({
					url:'/SRA_website/listInfo',
					data:{
						VeriCode:this.bid,
						listId:this.listId
					}
				}).then(res=>{
					if(res.code != 100) return;
					this.content = res.data.info.website_list_info;
				})
			},
			cashStore(){
				if(this.money <=0 || this.money > Number(this.pageData.money)) return;
				this.$http.post({
					url:'/BrokerApi/cashStore',
					data:{
						money:this.money,
						shop_id:this.shop_id
					}
				}).then(res=>{
					if(res.code != 200) return this.$Toast(res.msg);
					this.toUrl(`/moneyPage/pay/playSs?money=${this.money}`)
					
				})
			}
		},
		computed:{
			...mapState(['bid','color']),
			Flag(){
				if(this.money > 0 && this.money <= Number(this.pageData.money)){
					return true;
				}else{
					return false;
				};
			}
		}
	}
</script>
<style lang="scss">
	page{
		background-color:#f3f2f6;
	}
</style>
<style lang="scss" scoped>
	$pageBg:#f3f2f6;
	.imgs{
		width:153rpx;
		height: 153rpx;
		border-radius: 10rpx;
	}
	.classIf{
		display: inline-block;
		padding:2rpx 10rpx;
		color:#fff;
		font-size:20rpx;
		border-radius: 6rpx;
		background-color: #0ECD8B;
	}
	.jifenIcon {
		width: 27rpx;
		height: 29rpx;
	}
	.Jifen {
		flex: 1;
		height: 80rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333333;
	}
	
	.palyBtn{
		width:100%;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 40rpx;
		color:#333;
		font-size:26rpx;
		background-color: #F4F5FA;
		margin:50rpx 0 30rpx 0;
		font-weight: bold;
	}
	.Active{
		background-color: var(--color);
		color:#fff;
	}
</style>
